<template>
  <div class="sysDialog">
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      :before-close="handelClose"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="enterpriseDialog_center">
        <div style="display:flex;margin-bottom:8px">
          <el-input
            v-model="filterText"
            placeholder="输入关键字进行过滤"
            style="margin-bottom:10px;flex:3"
          />
          <div style="flex:1;text-align:right;line-height: 35px;"><el-checkbox v-model="checked" @change="chooseCheck" /> 全选/反选
          </div>
        </div>
        <div style="display:flex;margin-bottom:8px">
          <div style="flex:1;"><span style="color:red;text-decoration:underline">{{ name }}</span>配置单位:</div>
        </div>
        <el-tree
          ref="tree"
          class="enterpriseTree"
          :data="enterpriseTreeData"
          :props="defaultProps"
          :show-checkbox="true"
          node-key="guid"
          :style="`height:${treeHeight}px;overflow-y:auto`"
          :filter-node-method="filterNode"
        >
          <span slot-scope="{ node }" style="width: 100%;">
            <span style="font-size: 16px;">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handelClose">取 消</el-button>
        <el-button :loading="isSubmit" type="primary" @click="submitForm">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bindEnterprise } from '@/api/sysConfig/index';
import { Message } from 'element-ui';
import { setToken } from '@/utils/auth.js';
export default {
  data() {
    return {
      dialogVisible: false,
      width: '38%',
      title: '配置单位',
      isSubmit: false,
      filterText: '',
      enterpriseTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeHeight: '',
      checked: false,
      name: ''
    };
  },
  watch: {
    filterText: {
      handler: function(val) {
        if (this.enterpriseTreeData) {
          this.$refs.tree.filter(val);
        }
      }, deep: true
    }
  },
  mounted() {
    this.treeHeight = window.innerHeight - 400;
  },
  methods: {
    chooseCheck() { // el-tree全选事件
      if (this.checked) { // 全选
        this.$refs.tree.setCheckedNodes(this.enterpriseTreeData);
      } else { // 取消选中
        this.$refs.tree.setCheckedKeys([]);
      }
    },
    filterNode(val, data) {
      if (!val) return true;
      return data.label.indexOf(val) !== -1;
    },
    submitForm() {
      if (this.$refs.tree.getCheckedNodes().length === 0) {
        Message({
          message: '请勾选单位',
          type: 'warning'
        });
      } else {
        this.isSubmit = true;
        const enterprisesList = [];
        const userIdList = [];
        this.$refs.tree.getCheckedNodes().map(o => {
          enterprisesList.push(o.guid);
        });
        if (this.$parent.userId === '') {
          this.$parent.$refs.xTable.getCheckboxRecords().map(o => {
            userIdList.push(o.id);
          });
        } else {
          userIdList.push(this.$parent.userId);
        }
        bindEnterprise({
          userIds: userIdList,
          enterprises: enterprisesList
        }).then(res => {
          this.isSubmit = false;
          this.dialogVisible = false;
          if (res.success) {
            Message({
              message: res.message,
              type: 'success'
            });
            this.$parent.getTable(false);
            this.$parent.filterName = '';
            setTimeout(() => {
              if (localStorage.getItem('xcNickName') === this.name) {
                const enterprisesList = [];
                this.$refs.tree.getCheckedNodes().map(o => {
                  enterprisesList.push({
                    ENTERPRISE_GUID: o.enterpriseGuid,
                    ISBN_CODE: o.label.split(' ')[0],
                    NAME: o.name,
                    RELATION: '',
                    SYS_USER_ID: localStorage.getItem('userId')
                  });
                });
                setToken(
                  'enterpriseList',
                  JSON.stringify(enterprisesList)
                );
                this.$notify({
                  title: '成功',
                  message: '系统检测到您正在修改自己的单位，已为你配置成所选单位',
                  type: 'success',
                  duration: 4000
                });
              }
            }, 1000);
          } else {
            Message({
              message: res.message,
              type: 'warning'
            });
          }
        });
      }
    },
    handelClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>

.sysDialog /deep/ .el-tree-node__expand-icon.is-leaf{
  width: 5px!important;
}

.enterpriseTree /deep/ .el-tree-node__content>label.el-checkbox {
    margin-right: 8px;
    position: absolute;
    right: 0px;
}
.enterpriseTree /deep/ .el-tree-node__content {
  height: 35px !important;
}

.enterpriseTree /deep/ .el-tree-node__content:hover {
   background: #fff !important;
   color: #606266 !important
}
.sysDialog /deep/ .el-dialog {
   margin-top: calc(10vh) !important
}
.sysDialog /deep/  .el-dialog__header{
    border-bottom: 1px solid #cec9c9;
}
.sysDialog /deep/ .el-dialog__footer{
     border-top: 1px solid #cec9c9;
}
</style>
